(function () {
  $(document).ready(function () {
    // query
    const query = util.parseUrlQuery();
    // title
    title(query);
    // menu active
    menuActive(query);
    // breadcrumb
    breadcrumb(query);
    // search text
    if (query.search) {
      $('form.search input').val(query.search);
    }
    // adjust container padding-top
    _fixContainerSite($('nav.navbar'), $('.container-site'), $('footer'));
  });

  $(document).on('echo-ready', function () {
    // query
    const query = util.parseUrlQuery();
    // load more
    loadMore(query);
  });

  function title(query) {
    if (env.site.path === 'static/articles') {
      if (query.search !== undefined) {
        document.title = `${query.search} | <%=text('Search')%> | ${env.base.title}`;
      } else if (query.categoryId !== undefined) {
        document.title = `${query.categoryName} | <%=text('Category')%> | ${env.base.title}`;
      } else if (query.tagId !== undefined) {
        document.title = `${query.tagName} | <%=text('Tag')%> | ${env.base.title}`;
      }
    } else if (env.site.path === 'static/comments') {
      document.title = `<%=text('Comments')%> | ${env.base.title}`;
    }
  }

  function menuActive(query) {
    const categoryId = query.categoryId || (env.article && env.article.atomCategoryId);
    if (categoryId) {
      const link = $(`.category-${categoryId}`);
      link.parents('li').addClass('active');
    }
  }

  function breadcrumb(query) {
    const $container = $('.breadcrumb-nav');
    // nav
    if (env.site.path === 'static/articles') {
      if (query.search !== undefined) {
        $('.parent', $container).text('<%=text("Search")%>');
        $('.current', $container).text(query.search);
      } else if (query.categoryId !== undefined) {
        $('.parent', $container).text('<%=text("Category")%>');
        $('.current', $container).text(query.categoryName);
      } else if (query.tagId !== undefined) {
        $('.parent', $container).text('<%=text("Tag")%>');
        $('.current', $container).text(query.tagName);
      }
    } else if (env.site.path === 'static/comments') {
      $('.parent', $container).text('<%=text("Comment")%>');
      $('.current', $container).text('<%=text("All")%>');
    } else if (env.site.path === 'main/article') {
      $('.parent', $container).html(
        `<a href="${util.url('static/articles.html')}?categoryId=${
          env.article.atomCategoryId
        }&categoryName=${encodeURIComponent(env.article.atomCategoryName)}">${util.escapeHtml(
          env.article.atomCategoryName
        )}</a>`
      );
      $('.current', $container).text(env.article.atomName);
    }
    // show
    if (env.site.path !== 'main/index/index') {
      $('.parent', $container).removeClass('d-none');
      $('.current', $container).removeClass('d-none');
    }
  }

  function loadMore(query) {
    _loadMore({
      categoryId: query.categoryId,
      tagId: query.tagId,
      search: query.search,
    });
  }

  function _loadMore({ categoryId, tagId, search }) {
    if ($('.article-list').length === 0) return;
    util.loadMore({
      container: '.article-list',
      index: (env.index && env.index[env.site.path]) || 0,
      onFetch({ index }) {
        // options
        const options = {
          language: env.language && env.language.current,
          where: {},
          orders: [
            ['p.sticky', 'desc'],
            ['a.createdAt', 'desc'],
          ],
          page: { index },
          mode: 'default',
        };
        // categoryId
        if (categoryId) {
          options.category = categoryId;
          options.orders = [
            ['p.sticky', 'desc'],
            ['p.sorting', 'asc'],
            ['a.createdAt', 'desc'],
          ];
        }
        // tagId
        if (tagId) {
          options.tag = tagId;
          options.orders = [
            ['p.sticky', 'desc'],
            ['a.createdAt', 'desc'],
          ];
        }
        // search
        if (search) {
          options.where['q.html'] = { val: search, op: 'like' };
          options.mode = 'search';
        }
        // select
        return util.performAction({
          method: 'post',
          url: '/a/cms/article/list',
          body: {
            atomClass: env.site.atomClass,
            options,
          },
        });
      },
      onParse(item) {
        const sticky = !item.sticky ? '' : '<i class="fas fa-thumbtack"></i> ';
        const audio = !item.audioFirst ? '' : '<i class="fas fa-music"></i> ';
        const attachment = item.attachmentCount === 0 ? '' : '<i class="fas fa-paperclip"></i> ';
        const mediaUrl = item.imageCover || item.imageFirst;
        const media = !mediaUrl
          ? ''
          : `
      <a class="media-right" target="_blank" href="${util.url(item.url)}">
        <img class="media-object" src="${util.combineImageUrl(mediaUrl, 125, 100)}">
      </a>
        `;
        const category =
          categoryId === undefined
            ? `<a target="_blank" href="${util.url('static/articles.html')}?categoryId=${
                item.atomCategoryId
              }&categoryName=${encodeURIComponent(item.atomCategoryName)}"><span class="num category">${util.escapeHtml(
                item.atomCategoryName
              )}</span></a>`
            : '';
        // tags
        let tagsText = '';
        const tags = item.atomTags ? JSON.parse(item.atomTags) : null;
        if (tags && tags.length > 0) {
          tagsText += '<i class="fas fa-tags"></i> ';
          for (let i = 0; i < tags.length; i++) {
            const tagId = tags[i];
            const tagName = util.sidebar.getTagName(tagId);
            tagsText += `<a target="_blank" href="${util.url(
              'static/articles.html'
            )}?tagId=${tagId}&tagName=${encodeURIComponent(tagName)}"><span class="num tag">${util.escapeHtml(
              tagName
            )}</span></a>`;
          }
          tagsText += '';
        }
        const stat = `
<div class="title stat no-parse" data-article-id="${item.atomId}">
${category}
<span class="num date">${util.formatDateTime(item.atomCreatedAt)}</span>
<i class="fas fa-eye"></i><span class="num readCount">${item.readCount}</span>
<i class="fas fa-heart"></i><span class="num starCount">${item.starCount}</span>
<a target="_blank" href="${util.url(item.url)}#comments"><i class="fas fa-comment"></i><span class="num commentCount">${
          item.commentCount
        }</span></a>
${tagsText}
</div>
        `;
        return `
  <li>
      <div class="article-list-section">
        <div class="article-list-content">
          ${media}
          <h4 class="article-list-title">${sticky}${audio}${attachment}<a target="_blank" href="${util.url(
          item.url
        )}">${util.escapeHtml(item.atomName)}</a></h4>
          <p>${util.escapeHtml(item.description) || item.summary}</p>
        </div>
        ${stat}
      </div>
  </li>
        `;
      },
    });
  }

  function _fixContainerSite($navbar, $containerSite, $footer) {
    if (window.self !== window.top) return;
    if ($navbar.length === 0 || $containerSite.length === 0 || $footer.length === 0) return;
    // init
    const $window = $(window);

    // onScroll
    const _onScroll = function () {
      // min-height
      const diff = $window.height() - ($footer.offset().top + $footer.outerHeight(true));
      const height = $containerSite.outerHeight();
      $containerSite.css('min-height', height + diff);
    };

    // bind event
    $window.on('scroll.infinite resize.infinite', _onScroll);
    _onScroll();
  }
})();
